<template>
  <div class="songs-list find-music-cpns" ref="scoll">
    <tag-cat @handleGetSongs="handleGetSongs" :tagslist="tagslist"></tag-cat>
    <div class="songs">
      <list-item
        v-for="item in songsList"
        :key="item.id"
        :item="item"
        v-bind="configObj"
      ></list-item>
      <el-pagination
        layout="prev, pager, next"
        background
        :page-size="limit"
        :total="totals"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        style="text-align: center; margin: 0 auto; margin-bottom: 20px"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import TagCat from '@/components/page-find-music/page-songs-list/tag-cat-name'
import ListItem from '@/base-ui/card-item'
import { InitGetData } from '../hook/songs-list'

export default defineComponent({
  components: {
    ListItem,
    TagCat
  },
  setup() {
    //歌单展示组件配置
    const configObj = {
      wth: '18%',
      topShow: false,
      userShow: true
    }
    // 获取歌单传入对应参数
    let cat = '全部'
    const limit = ref(30)
    let offset = 0
    // dom
    const scoll = ref<HTMLElement>()

    // 初始化请求数据
    const [tagslist, songsList, totals, getSongList, currentPage, initRequest] =
      InitGetData(cat, limit, offset)
    // 组件点击标签的回调
    const handleGetSongs = (catName: string) => {
      initRequest()
      cat = catName
      getSongList(limit.value, offset, cat)
    }
    //点击切换页码回调
    const handleCurrentChange = (newPage: number) => {
      currentPage.value = newPage
      offset = (newPage - 1) * limit.value
      getSongList(limit.value, offset, cat)
      //返回顶部
      scoll.value!.scrollTop = 0
    }
    return {
      handleGetSongs,
      handleCurrentChange,
      tagslist,
      scoll,
      configObj,
      songsList,
      limit,
      totals,
      currentPage
    }
  }
})
</script>

<style scoped lang="less">
.songs-list {
  width: 90%;
  padding-right: 30px;

  .songs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
</style>
